
<template>
  <div  id='container' class='map' >

  </div>
</template>
<script>

export default {
  data(){
   return{
     
   }

    
  },
  methods:{
    //初始化地图
    init_map(){
       var map = new AMap.Map('container', {
        mapStyle: 'amap://styles/grey',
        center: [116.40866,39.87596],
        zoom: 11,
        pitch: 47,
        rotation: 45,
        viewMode: '3D'
    });

    var layer = new Loca.LinkLayer({
        map: map,
        fitView: false,
    });
    
    
    $.get('//a.amap.com/Loca/static/mock/home_comp_line.json', function (home_comp_line) {
        layer.setData(home_comp_line.slice(0,500), {
            lnglat: 'lnglat'
        });
    
        layer.setOptions({
            blendMode: 'lighter',
            style: {
                // 曲率 [-1, 1] 区间
                curveness: function(data) {
                  if(data.value.dis < 100){
                    return 0.07;
                  } else if(data.value.dis < 300){
                    return 0.05;
                  } else if(data.value.dis < 500){
                    return 0.02;
                  }  else if(data.value.dis < 700){
                    return 0.01;
                  } else {
                    return 0.005;
                  }
                },
                opacity: 0.8,
                color: '#5DFBF9'
            }
        });
    
        layer.render();
    });
    }

  },
  
  created(){

  },
  mounted(){
    //调用初始化地图
   this.init_map()
  

  }
}
  
</script>
<style scoped>
.map{
  height: 800px;
}


</style>
